date: 2023-09-05
Type: Cours
Projet: Blindcode
Cours: IDE

PHPStorm : Exercice de vérification

Header :

Dans cet exercice, vous allez créer deux fichiers HTML et un fichier CSS en utilisant PHPStorm. Les fichiers HTML doivent être liés entre eux, et le CSS doit modifier la couleur de fond en noir et l'écriture en blanc.

Body

Exercice : PHPStorm, la base

Instructions :

Ouvrez PHPStorm sur votre ordinateur.
Créez un nouveau projet dans PHPStorm en utilisant le nom de votre choix.
À l'intérieur du projet, créez un fichier HTML nommé index.html.

Dans le fichier index.html, ajoutez le code suivant :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link rel="stylesheet" href="style.css">
	    <title>Page Principale</title>
	</head>
	<body>
	    <h1>Page Principale</h1>
	    <p>Visitez la <a href="article.html">page de l'article</a></p>
	</body>
</html>

5. Créez un deuxième fichier HTML nommé `article.html`.
    
6. Dans le fichier `article.html`, ajoutez le code suivant :
    ```html
    <!DOCTYPE html>
	<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <link rel="stylesheet" href="style.css">
		    <title>Article</title>
		</head>
		<body>
		    <a href="index.html"><img src="image.jpg" alt="Une image"></a>
		</body>
	</html>

Téléchargez une image que vous voulez sur internet et enregistrez la dans votre dossier de projet. Une fois ceci fait, modifiez le code de l'article pour que l'image apparaisse sur votre site.
Créez un fichier CSS nommé style.css.
Dans le fichier style.css, ajoutez le code suivant pour changer la couleur de fond en noir et l'écriture en blanc :
```
body {
    background-color: black;
    color: white;
}
```

9. Assurez-vous que les trois fichiers (`index.html`, `article.html`, et `style.css`) sont bien situés dans le même répertoire du projet.
10. Utilisez PHPStorm pour ouvrir ces fichiers et assurez-vous qu'ils sont correctement enregistrés.
11. Vérifiez que les liens entre les fichiers HTML fonctionnent correctement.
12. Lancez le fichier `index.html` dans votre navigateur pour vérifier que la mise en page est correcte et que les liens fonctionnent comme prévu.
13. Félicitations ! Vous avez réussi à créer deux fichiers HTML liés entre eux et un fichier CSS pour changer le style de votre page web.

---------------------------------------------------------------------------
## Footer

- [[Accueil - PHPStorm]]
- [[PHPStorm - Les raccourcis|Précédent]]
##### Tags
#cours #blindcode #ide #informatique #phpstorm

*créé le 2023-09-05 à 11:41*